CSS Website Layout

CSS வலைத்தள பக்கவடிவத்தை கற்றுக்கொள்ளுங்கள்

CSS Website Layout

ஒரு வலைத்தளம் பெரும்பாலும் பல பிரிவுகளாகப் பிரிக்கப்படுகிறது, உச்ச தலைப்பு, வழிசெலுத்தல் பட்டி, முக்கிய உள்ளடக்கம் மற்றும் அடிக்குறிப்பு போன்றவை:

Header
Navigation Menu

Main Content

வலைத்தளத்தின் முக்கிய உள்ளடக்கம் இங்கே காண்பிக்கப்படுகிறது.

Sidebar

துணை உள்ளடக்கம் அல்லது விளம்பரங்கள்.

Footer

தேர்வு செய்ய நிறைய வெவ்வேறு பக்கவடிவ வடிவமைப்புகள் உள்ளன. இருப்பினும், மேலே உள்ள கட்டமைப்பு மிகவும் பொதுவான ஒன்றாகும், மேலும் இந்த டுடோரியலில் அதை நெருக்கமாகப் பார்ப்போம்.

CSS Header

ஒரு தலைப்பு பொதுவாக வலைத்தளத்தின் மேலே அமைந்திருக்கும், மேலும் பெரும்பாலும் ஒரு லோகோ அல்லது வலைத்தளப் பெயரைக் கொண்டிருக்கும்:

எடுத்துக்காட்டு

header {
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px;
}

💡 Jassif Team உதவிக்குறிப்பு:

தலைப்பு வலைத்தளத்தின் அடையாளத்தைக் காட்டுவதற்கான முக்கிய இடமாகும். இது பொதுவாக வலைத்தளத்தின் அனைத்து பக்கங்களிலும் நிலையானதாக இருக்கும்.

முடிவு

My Header

CSS Navigation Bar

ஒரு வழிசெலுத்தல் பட்டியில் உங்கள் வலைத்தளத்தின் வழியே பார்வையாளர்கள் செல்ல உதவும் இணைப்புகளின் பட்டியல் உள்ளது:

எடுத்துக்காட்டு

/* Style the topnav */
ul.topnav {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333333;
}

/* Style links in topnav */
ul.topnav li a {
    display: block;
    color: #f1f1f1;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
ul.topnav li a:hover {
    background-color: #dddddd;
    color: black;
}

முடிவு

🚀 Jassif Team உதவிக்குறிப்பு:

Flexbox ஐப் பயன்படுத்துவது நவீன வழிசெலுத்தல் பட்டிகளை உருவாக்க எளிதான வழியாகும். இது தன்னிச்சையான தளவமைப்பு மற்றும் பதிலளிக்கும் வடிவமைப்புக்கு உதவுகிறது.

CSS Layout Content

ஒரு வலைத்தளத்தின் உள்ளடக்கம் எவ்வாறு காட்டப்பட வேண்டும் என்பது பெரும்பாலும் பயனர்களின் சாதனத்தைப் பொறுத்தது. மிகவும் பொதுவான பக்கவடிவங்கள்:

1-நெடுக்கை பக்கவடிவம்

மொபைல் உலாவிகளுக்கு பெரும்பாலும் பயன்படுத்தப்படுகிறது

2-நெடுக்கை பக்கவடிவம்

டேப்லெட்டுகள் மற்றும் லேப்டாப்களுக்கு பெரும்பாலும் பயன்படுத்தப்படுகிறது

3-நெடுக்கை பக்கவடிவம்

டெஸ்க்டாப்களுக்கு மட்டுமே பயன்படுத்தப்படுகிறது

1-நெடுக்கை:

நெடுக்கை 1

2-நெடுக்கை:

நெடுக்கை 1
நெடுக்கை 2

3-நெடுக்கை:

நெடுக்கை 1
நெடுக்கை 2
நெடுக்கை 3

இங்கே நாம் ஒரு 3-நெடுக்கை பக்கவடிவத்தை உருவாக்குவோம், மேலும் திரை அகலம் 600px க்கும் குறைவாக இருக்கும்போது அதை 1-நெடுக்கை பக்கவடிவமாக மாற்றுவோம்:

எடுத்துக்காட்டு

div.flex-container {
    display: flex;
    /* Show the flex items horizontally */
    flex-direction: row;
}

div.flex-container > div {
    margin: 10px;
}

/* Use media query and show the flex items vertically if screen width is less than 600px */
@media screen and (max-width:600px) {
    div.flex-container {
        flex-direction: column;
    }
}

முடிவு

நெடுக்கை

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.

நெடுக்கை

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.

நெடுக்கை

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna.

📱 Jassif Team உதவிக்குறிப்பு:

CSS @media விதியைப் பற்றி மேலும் அறிய எங்கள் CSS Media Queries அத்தியாயத்தைப் பார்க்கவும்.

CSS Flexbox ஐப் பற்றி மேலும் அறிய எங்கள் CSS Flexbox அத்தியாயத்தைப் பார்க்கவும்.

CSS Basic and Fixed Footer

அடிக்குறிப்பு வலைப்பக்கத்தின் அடிப்பகுதியில் வைக்கப்படுகிறது. இது பெரும்பாலும் பதிப்புரிமை மற்றும் தொடர்புத் தகவல் போன்ற தகவல்களைக் கொண்டிருக்கும்.

அடிப்படை அடிக்குறிப்பு பாணி:

footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 8px;
}

முடிவு

Footer

நிலையான அடிக்குறிப்பு:

பின்வரும் எடுத்துக்காட்டு பக்கத்தின் அடிப்பகுதியில் எப்போதும் காணக்கூடிய ஒரு நிலையான அடிக்குறிப்பைக் காட்டுகிறது, ஸ்க்ரோலிங் இருப்பதைப் பொருட்படுத்தாமல்:

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f1f1f1;
    padding: 8px;
    text-align: center;
    z-index: 1000;
}

⚠️ முக்கிய குறிப்பு:

நிலையான அடிக்குறப்புகளைப் பயன்படுத்தும் போது கவனமாக இருங்கள், ஏனெனில் அவை சில நேரங்களில் உள்ளடக்கத்தை மறைக்கலாம். போதுமான உள் இடைவெளியைச் சேர்ப்பதை உறுதிசெய்க.

CSS Responsive Website

இந்த எடுத்துக்காட்டில், ஒரு பதிலளிக்கும் வலைத்தளத்தை உருவாக்க மீடியா குவெரிகள் மற்றும் flexbox ஆகியவற்றை ஒன்றாகப் பயன்படுத்துகிறோம், இதில் நெகிழ்வான வழிசெலுத்தல் பட்டி மற்றும் நெகிழ்வான உள்ளடக்கம் உள்ளது.

முழுமையான பதிலளிக்கும் வலைத்தள எடுத்துக்காட்டு:

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial;
}

/* Header styling */
.header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
}

/* Navigation styling */
.navbar {
    display: flex;
    background-color: #333;
}

.navbar a {
    color: white;
    padding: 14px 20px;
    text-decoration: none;
    text-align: center;
}

.navbar a:hover {
    background-color: #ddd;
    color: black;
}

/* Responsive columns */
.row {
    display: flex;
    flex-wrap: wrap;
}

.side {
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
}

.main {
    flex: 70%;
    background-color: white;
    padding: 20px;
}

.footer {
    padding: 20px;
    text-align: center;
    background: #ddd;
}

/* Fake image */
.fakeimg {
    background-color: #aaa;
    width: 100%;
    padding: 20px;
}

/* Responsive layout */
@media screen and (max-width: 700px) {
    .row, .navbar {
        flex-direction: column;
    }
}
</style>
</head>
<body>

<div class="header">
    <h1>என் வலைத்தளம்</h1>
    <p>நெகிழ்வான பக்கவடிவத்துடன்.</p>
</div>

<div class="navbar">
    <a href="#">முகப்பு</a>
    <a href="#">பற்றி</a>
    <a href="#">சேவைகள்</a>
    <a href="#">தொடர்பு</a>
</div>

<div class="row">
    <div class="side">
        <h2>எனைப் பற்றி</h2>
        <h5>எனது புகைப்படம்:</h5>
        <div class="fakeimg" style="height:200px;">படம்</div>
        <p>என்னைப் பற்றி சில உரை... culpa qui officia deserunt mollit anim..</p>
        <h3>மேலும் உரை</h3>
        <p>லொரேம் இப்சம் டோலோர் சிட் அமெத்.</p>
        <div class="fakeimg" style="height:60px;">படம்</div><br>
        <div class="fakeimg" style="height:60px;">படம்</div><br>
        <div class="fakeimg" style="height:60px;">படம்</div>
    </div>
    <div class="main">
        <h2>தலைப்பு தலைப்பு</h2>
        <h5>தலைப்பு விளக்கம், டிசம்பர் 7, 2024</h5>
        <div class="fakeimg" style="height:200px;">படம்</div>
        <p>சில உரை..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
        <br>
        <h2>தலைப்பு தலைப்பு</h2>
        <h5>தலைப்பு விளக்கம், செப்டம்பர் 2, 2024</h5>
        <div class="fakeimg" style="height:200px;">படம்</div>
        <p>சில உரை..</p>
        <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
</div>

<div class="footer">
    <h2>அடிக்குறிப்பு</h2>
</div>

</body>
</html>

முடிவு - லைவ் டெமோ:

என் வலைத்தளம்

நெகிழ்வான பக்கவடிவத்துடன்.

முகப்பு பற்றி சேவைகள் தொடர்பு

எனைப் பற்றி

எனது புகைப்படம்:
படம்

என்னைப் பற்றி சில உரை... culpa qui officia deserunt mollit anim..

மேலும் உரை

லொரேம் இப்சம் டோலோர் சிட் அமெத்.

படம்

படம்

படம்

தலைப்பு தலைப்பு

தலைப்பு விளக்கம், டிசம்பர் 7, 2024
படம்

சில உரை..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


தலைப்பு தலைப்பு

தலைப்பு விளக்கம், செப்டம்பர் 2, 2024
படம்

சில உரை..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

அடிக்குறிப்பு

📱 பதிலளிக்கும் வடிவமைப்பு சோதனை:

மேலே உள்ள டெமோ பெட்டியின் அளவை மாற்றிப் பாருங்கள். 700px க்கு கீழே அளவைக் குறைக்கும்போது, பக்கவடிவம் தானாகவே செங்குத்து நெடுக்கைக்கு மாறும்.

🌐 Jassif Team உதவிக்குறிப்பு:

எங்கள் Jassif Team இடங்களைப் பற்றி கேள்விப்பட்டிருக்கிறீர்களா? இங்கே நீங்கள் புதிதாக உங்கள் வலைத்தளத்தை உருவாக்கலாம் அல்லது ஒரு வார்ப்புருவைப் பயன்படுத்தலாம்.

CSS Website Layout பயிற்சி

உங்கள் CSS வலைத்தள பக்கவடிவம் அறிவைச் சோதிக்க இந்த பயிற்சியை முயற்சிக்கவும்.

❓ மொபைல் சாதனங்களுக்கு எந்த வலைத்தள பக்கவடிவம் பொதுவாகப் பயன்படுத்தப்படுகிறது?

3-நெடுக்கை பக்கவடிவம்
✗ தவறு! 3-நெடுக்கை பக்கவடிவம் டெஸ்க்டாப்களுக்கு மட்டுமே பயன்படுத்தப்படுகிறது
2-நெடுக்கை பக்கவடிவம்
✗ தவறு! 2-நெடுக்கை பக்கவடிவம் டேப்லெட்டுகள் மற்றும் லேப்டாப்களுக்குப் பொருத்தமானது
1-நெடுக்கை பக்கவடிவம்
✓ சரி! 1-நெடுக்கை பக்கவடிவம் மொபைல் சாதனங்களுக்கு சிறந்தது, ஏனெனில் இது குறுகிய திரை அகலத்திற்கு ஏற்றது
4-நெடுக்கை பக்கவடிவம்
✗ தவறு! 4-நெடுக்கை பக்கவடிவம் மொபைல் சாதனங்களுக்கு மிகவும் சிக்கலானது மற்றும் பொருத்தமற்றது

சுருக்கம்

பொதுவான வலைத்தள கட்டமைப்பில் தலைப்பு, வழிசெலுத்தல், முக்கிய உள்ளடக்கம் மற்றும் அடிக்குறிப்பு ஆகியவை அடங்கும்
CSS Flexbox நவீன பக்கவடிவங்களை உருவாக்க எளிதான வழியை வழங்குகிறது
மீடியா குவெரிகள் வெவ்வேறு சாதனங்களுக்கு பதிலளிக்கும் வலைத்தளங்களை உருவாக்க உதவுகின்றன
மொபைல்-முதல் வடிவமைப்பு (mobile-first design) நவீன வலை மேம்பாட்டிற்கான சிறந்த நடைமுறையாகும்

🎯 Jassif Team இறுதி உதவிக்குறிப்பு:

ஒரு சிறந்த வலைத்தள பக்கவடிவத்தை உருவாக்க, எப்போதும் பயனர் அனுபவத்தை முதலில் வைக்கவும். பதிலளிக்கும் வடிவமைப்பைப் பயன்படுத்தவும், வெவ்வேறு திரை அளவுகளில் உங்கள் வலைத்தளம் சிறப்பாகச் செயல்படுவதை உறுதிசெய்யவும். எளிமை மற்றும் வழிசெலுத்தல் எளிமையை நோக்கமாகக் கொள்ளுங்கள்.